<template>
  <view>
    <u-modal
      :show="showModel"
      :title="title"
      :content="content"
      close-on-click-overlay
			:show-confirm-button="showConfirm"
      :show-cancel-button="showCancel"
      :confirm-text="confirmText"
      :cancel-text="cancelText"
			:confirm-color="confirmColor"
			:cancel-color="cancelColor"
      :button-reverse="reverse"
      :border-radius="borderRadius"
      @close="close"
      @cancel="close"
      @confirm="confirm"
    />
  </view>
</template>

<script>
export default {
  props: {
		// 显示弹窗
		show: {
      type: Boolean,
      default: false,
		},
    // 标题
    title: {
      type: String,
      default: "登录提示",
    },
    // 提示内容
    content: {
      type: String,
      default: "请完成登录后再进行操作！",
    },
		// 显示确认按钮
		showConfirm: {
      type: Boolean,
      default: true,
		},
    // 显示取消按钮
    showCancel: {
      type: Boolean,
      default: true,
    },
    // 对调确认和取消的位置
    reverse: {
      type: Boolean,
      default: false,
    },
    // 确认按钮
    confirmText: {
      type: String,
      default: "去登录",
    },
		// 取消按钮
    cancelText: {
      type: String,
      default: "取消",
    },
		// 确认按钮颜色
		confirmColor: {
			type: String,
			default: "#2979ff"
		},
		// 取消按钮的颜色
		cancelColor: {
			type: String,
			default: "#606266"
		},
    // 圆角
    borderRadius: {
      type: String,
      default: '40rpx'
    }
  },
	computed: {
		showModel: {
			get() {
				return this.show;
			},
			set() {
				this.$emit('close', false);
			}
		}
	},
  methods: {
    // 关闭模态框
    close() {
			this.showModel = false;
    },
    // 确认
    confirm() {
      this.$emit("confirm");
    },
  },
};
</script>

<style lang="scss" scoped></style>
